<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>摄影师详情 - 漫展接单小程序</title>
    <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-100">
    <!-- 顶部导航栏 -->
    <div class="bg-white shadow-md">
        <div class="max-w-screen-xl mx-auto px-4 py-3 flex items-center">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-gray-600 mr-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18" />
            </svg>
            <div class="text-lg font-medium">摄影师详情</div>
        </div>
    </div>

    <!-- 摄影师信息 -->
    <div class="bg-white">
        <div class="relative">
            <img src="https://images.unsplash.com/photo-1581318694548-0fb6e47fe59b?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80" alt="摄影作品" class="w-full h-48 object-cover">
            <div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black to-transparent h-24"></div>
        </div>
        
        <div class="relative -mt-16 px-4">
            <div class="flex items-end">
                <img src="https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?ixlib=rb-1.2.1&auto=format&fit=crop&w=100&q=80" alt="摄影师头像" class="w-20 h-20 rounded-full border-4 border-white">
                <div class="ml-4 text-white">
                    <h2 class="text-xl font-bold">小明摄影</h2>
                    <div class="flex items-center">
                        <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-yellow-400" viewBox="0 0 20 20" fill="currentColor">
                            <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
                        </svg>
                        <span class="ml-1 text-sm">4.9 (125条评价)</span>
                    </div>
                </div>
            </div>
        </div>

        <div class="p-4">
            <div class="flex items-center justify-between mb-4">
                <div class="flex items-center">
                    <div class="bg-green-500 text-white text-sm px-3 py-1 rounded-full mr-2">空闲中</div>
                    <div class="text-gray-600 text-sm">接单量: 289</div>
                </div>
                <button class="flex items-center text-gray-600">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.684 13.342C8.886 12.938 9 12.482 9 12c0-.482-.114-.938-.316-1.342m0 2.684a3 3 0 110-2.684m0 2.684l6.632 3.316m-6.632-6l6.632-3.316m0 0a3 3 0 105.367-2.684 3 3 0 00-5.367 2.684zm0 9.316a3 3 0 105.368 2.684 3 3 0 00-5.368-2.684z" />
                    </svg>
                    分享
                </button>
            </div>

            <div class="flex flex-wrap gap-2 mb-4">
                <div class="bg-gray-100 text-gray-700 text-sm px-3 py-1 rounded-full">Cosplay专精</div>
                <div class="bg-gray-100 text-gray-700 text-sm px-3 py-1 rounded-full">人像摄影</div>
                <div class="bg-gray-100 text-gray-700 text-sm px-3 py-1 rounded-full">后期修图</div>
            </div>

            <div class="mb-4">
                <h3 class="text-lg font-medium mb-2">关于我</h3>
                <p class="text-gray-600 text-sm">专注二次元人像摄影5年，擅长Cosplay、Lolita等风格拍摄。曾为多个知名Coser拍摄，作品发表于各大漫展和社交平台。提供拍摄、修图一条龙服务，让每位模特都能留下美好回忆。</p>
            </div>

            <div class="mb-4">
                <h3 class="text-lg font-medium mb-2">服务价格</h3>
                <div class="bg-gray-50 rounded-lg p-3">
                    <div class="flex justify-between items-center mb-2">
                        <div>
                            <div class="font-medium">基础套餐</div>
                            <div class="text-sm text-gray-500">30分钟/10张精修</div>
                        </div>
                        <div class="text-purple-600 font-bold">¥199</div>
                    </div>
                    <div class="flex justify-between items-center mb-2">
                        <div>
                            <div class="font-medium">标准套餐</div>
                            <div class="text-sm text-gray-500">60分钟/20张精修</div>